import React, { useEffect, useState } from 'react';
import { Drawer, Button, Popconfirm, Spin, message } from 'antd';
import PropTypes from 'prop-types';
import { postAssetCategoryDelete } from '@api/knowledge';
import { _ } from 'core-js';
// const prefixCls = 'asset-identification-drawer';
const lamination = [
  { value: 'application', label: '应用层' },
  { value: 'support', label: '支撑层' },
  { value: 'service', label: '服务层' },
  { value: 'system', label: '系统层' }
];
const AssetIdentificationDrawer = ({
  change,
  setDetail,
  componentList,
  detail,
  visible,
  setVisible,
  loading,
  setfromVisible,
  getList
}) => {
  const deleteFingerPrint = param => {
    postAssetCategoryDelete(param)
      .then(() => {
        message.success('删除成功');
        setVisible(false);
        getList();
        change();
      })
      .catch(e => {
        message.error(e.message);
      });
  };
  const [itemDist, setItemDist] = useState([
    { name: '名称', value: row => [row.name?.cn, row.product, row.name?.en].find(i => i) },
    { name: '描述', value: '', key: 'description' },
    { name: '品牌', value: '', key: 'brand.name.cn' },
    // { name: '品牌官方地址', value: '', key: 'brand.address' },
    { name: '厂商', value: '', key: 'company.name.cn' },
    {
      name: '厂商官方网址',
      value: row => {
        let A = _.get(row, 'company.referenceLinks', []);
        if (A.length > 0) {
          let result = A ? (
            <a target={'_blank'} href={A}>
              {A}
            </a>
          ) : null;
          return result;
        }
      }
    },
    {
      name: '二级分类',
      value: (row, componentList) => {
        return (
          <>
            {componentList &&
              _.get(componentList.find(r => r._id === row.secondAssetCategoryOid), 'name')}
          </>
        );
      }
    },
    {
      name: '一级分类',
      value: (row, componentList) => {
        return (
          <>
            {componentList &&
              _.get(componentList.find(r => r._id === row.topAssetCategoryOid), 'name')}
          </>
        );
      }
    },
    {
      name: '分层',
      value: row => {
        let item = lamination.find(r => r.value === _.get(row, 'layer', ''));
        let result = _.get(item, 'label') || null;
        return result;
      }
    },
    {
      name: '参考链接',
      value: row => {
        let A = _.get(row, 'referenceLinks[0]');
        let result = A ? (
          <a target={'_blank'} href={A}>
            {A}
          </a>
        ) : null;
        return result;
      }
    },
    {
      name: '是否国产化',
      value: row => {
        return <> {_.get(row, 'isDomestic') ? '是' : '否'}</>;
      }
    },
    {
      name: '是否是自定义指纹',
      value: row => {
        let isCustomize = _.get(row, 'isCustomize', false);
        return (
          <>
            {isCustomize ? (
              <>
                是
                <Button
                  type="link"
                  onClick={() => {
                    setDetail(row);
                    setfromVisible(true);
                  }}
                  style={{ lineHeight: 0 }}
                >
                  编辑
                </Button>
                <Popconfirm
                  title="确定删除吗"
                  onConfirm={() => {
                    deleteFingerPrint({ knowledgeId: _.get(row, '_id', '') });
                  }}
                >
                  <a style={{ color: '#F04038' }}>删除</a>
                </Popconfirm>
              </>
            ) : (
              '否'
            )}
          </>
        );
      },
      key: ''
    }
  ]);

  const renderItem = () => {
    if (componentList && detail && visible) {
      return (
        <>
          {itemDist.map(r => {
            let item = typeof r.value === 'function' ? r.value(detail, componentList) : r.value;
            return (
              item && (
                <p key={r.name}>
                  {r.name}：{item}
                </p>
              )
            );
          })}
        </>
      );
    }
  };
  useEffect(() => {
    if (componentList && detail && visible) {
      let newDist = itemDist;
      setItemDist(
        newDist.map(r => {
          if (r.key) {
            r.value = _.get(detail, r.key, '');
          }
          return r;
        })
      );
    }
  }, [componentList, detail, visible]);
  return (
    <>
      <Drawer
        title="指纹信息"
        placement="right"
        closable={true}
        width="550"
        onClose={() => setVisible(false)}
        visible={visible}
        zIndex={1}
      >
        <Spin spinning={loading} tip="加载中" className="c-finger-item-content is-loading">
          {renderItem()}
        </Spin>
      </Drawer>
    </>
  );
};

AssetIdentificationDrawer.propTypes = {
  visible: PropTypes.bool,
  setVisible: PropTypes.func,
  setDetail: PropTypes.func,
  setfromVisible: PropTypes.func,
  loading: PropTypes.bool,
  detail: PropTypes.Object,
  getList: PropTypes.func,
  renderRow: PropTypes.func,
  componentList: PropTypes,
  setDetai: PropTypes.func,
  change: PropTypes.func
};
export default AssetIdentificationDrawer;
